<template>
  <div style="width: 100%;">
    <div v-if="getNodeName" class="node-name">{{ getNodeName }}</div>
    <component
      :is="getComponent"
      v-if="element"
      :modeler="modeler"
      :element="element"
      :users="users"
    />
  </div>
</template>

<script>
import ProcessPanel from '../components/panel/Process.vue'
import TaskPanel from '../components/panel/Task.vue'
import StartEndPanel from '../components/panel/StartEnd.vue'
import GatewayPanel from '../components/panel/Gateway.vue'
import SequenceFlowPanel from '../components/panel/SequenceFlow.vue'
import { Node } from './lang/zh'
export default {
  components: { ProcessPanel, TaskPanel, StartEndPanel, GatewayPanel, SequenceFlowPanel },
  directives: {},
  filters: {},
  // props属性
  props: {
    modeler: {
      type: Object,
      required: true
    },
    users: {
      type: Array,
      required: true
    }
    // groups: {
    //   type: Array,
    //   required: true
    // },
    // categorys: {
    //   type: Array,
    //   required: true
    // },

  },
  data() {
    return {
      element: null
    }
  },
  // 计算
  computed: {
    getComponent() {
      const type = this.element?.type
      if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
        return 'StartEndPanel'
      }
      if ([
        'bpmn:UserTask',
        'bpmn:Task',
        'bpmn:SendTask',
        'bpmn:ReceiveTask',
        'bpmn:ManualTask',
        'bpmn:BusinessRuleTask',
        'bpmn:ServiceTask',
        'bpmn:ScriptTask'
        // 'bpmn:CallActivity',
        // 'bpmn:SubProcess'
      ].includes(type)) {
        return 'TaskPanel'
      }
      if (type === 'bpmn:SequenceFlow') {
        return 'SequenceFlowPanel'
      }
      if ([
        'bpmn:InclusiveGateway',
        'bpmn:ExclusiveGateway',
        'bpmn:ParallelGateway',
        'bpmn:EventBasedGateway'
      ].includes(type)) {
        return 'GatewayPanel'
      }
      if (type === 'bpmn:Process') {
        return 'ProcessPanel'
      }
      return null
    },
    getNodeName() {
      if (this.element) {
        const bizObj = this.element.businessObject
        const type = bizObj?.eventDefinitions
          ? bizObj.eventDefinitions[0].$type
          : bizObj.$type
        return Node[type] || type
      }
      return ''
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
  mounted() {
    this.handleModeler()
  },
  methods: {
    handleModeler() {
      console.log('panel组件页面')
      console.log(this.modeler)
      this.modeler.on('root.added', e => {
        console.log('root.added 操作', e)
        if (e.element.type === 'bpmn:Process') {
          this.element = null
          this.$nextTick().then(() => {
            this.element = e.element
          })
        }
      })
      this.modeler.on('shape.added', e => {
        console.log('shape.added 操作', e)
        if (e.element.type === 'bpmn:Process') {
          this.element = null
          this.$nextTick().then(() => {
            this.element = e.element
          })
        }
      })
      this.modeler.on('element.click', e => {
        console.log('element.click 操作', e)
        if (e.element.type === 'bpmn:Process') {
          this.element = e.element
        }
      })
      this.modeler.on('element.changed', e => {
        console.log('element.changed 操作', e)
        // hack 同类型面板不刷新
        const { element } = e
        if (element) {
          this.$nextTick().then(() => {
            this.element = element
          })
        }
      })
      // 页面加载完成后默认选中bpmn:Process，通过click事件获取，
      this.modeler.on('selection.changed', e => {
        console.log('selection.changed 操作', e)
        // hack 同类型面板不刷新
        this.element = null
        const element = e.newSelection[0]
        if (element) {
          this.$nextTick().then(() => {
            this.element = element
          })
        }
      })
    }
  }
}
</script>

<style>
.node-name{
  border-bottom: 1px solid #ccc;
  padding: 0 0 10px 20px;
  //margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #444;
}
</style>
